<template>
  <div class="international_header report_wrap_module">
    <div class="mini_header m_header mini_type">
      <div class="mini_header__content mini_header__login">
        <div class="nav_link">
          <ul class="nav_link_ul mini">
            <li
              class="nav_link_item"
              @mouseenter="openPanel('channelShow', 'channelShowTimeout')"
              @mouseleave="hiddenPanel('channelShow', 'channelShowTimeout')"
            >
              <a
                href="//www.bilibili.com/"
                class="link van_popover_reference"
                aria_describedy="van-popover-2884"
                tabindex="0"
              >
                <div class="navbar_logo"></div>
                主站
                <div class="navbar_pullup">
                  <i class="iconfont icon-zhankai"></i>
                </div>
              </a>
              <transition name="vp">
                <VpChannel v-show="channelShow" />
              </transition>
            </li>
            <li class="nav_link_item">
              <a href="//www.bilibili.com/anime/" target="_blank" class="link"
                >番剧</a
              >
            </li>
            <li
              class="nav_link_item"
              @mouseenter="openPanel('gameShow', 'gameShowTimeout')"
              @mouseleave="hiddenPanel('gameShow', 'gameShowTimeout')"
            >
              <a
                href="//game.bilibili.com/platform/"
                class="link van_popover_reference"
                aria_describedy="van-popover-7714"
                tabindex="0"
                >游戏中心</a
              >
              <transition name="vp">
                <VpGame v-show="gameShow" />
              </transition>
            </li>
            <li
              class="nav_link_item"
              @mouseenter="openPanel('liveShow', 'liveShowTimeout')"
              @mouseleave="hiddenPanel('liveShow', 'liveShowTimeout')"
            >
              <a
                href="//live.bilibili.com/"
                class="link van_popover_reference"
                aria_describedy="van-popover-9341"
                tabindex="0"
                >直播</a
              >
              <transition name="vp">
                <VpLive v-show="liveShow" />
              </transition>
            </li>
            <li class="nav_link_item">
              <span>
                <a
                  href="https://show.bilibili.com/platform/home.html?msource=pc_web"
                  class="link"
                  target="_blank"
                  >会员购</a
                >
              </span>
            </li>
            <li
              class="nav_link_item"
              @mouseenter="openPanel('mangaShow', 'mangaShowTimeout')"
              @mouseleave="hiddenPanel('mangaShow', 'mangaShowTimeout')"
            >
              <a
                href="//manga.bilibili.com/?from=bill_top_mnav"
                class="link van_popover_reference"
                aria_describedy="van-popover-4285"
                tabindex="0"
                >漫画</a
              >
              <transition name="vp">
                <VpManga v-show="mangaShow" />
              </transition>
            </li>
            <li class="nav_link_item">
              <span>
                <a
                  href="//www.bilibili.com/v/game/match/"
                  class="link"
                  target="_blank"
                  >赛事</a
                >
              </span>
            </li>
            <li class="nav_link_item">
              <span>
                <a
                  href="//app.bilibili.com/"
                  class="link van_popover_reference"
                  aria-describedby="van-popover-5033"
                  target="_blank"
                  tabindex="0"
                >
                  <i class="iconfont icon-icon_dingdao_xiazaiapp"></i>
                  下载APP
                </a>
              </span>
            </li>
          </ul>
        </div>
        <search-box></search-box>
        <div class="nav_user_center">
          <div class="user_con search_icon">
            <a
              href="//search.bilibili.com/?from_source=webtop_search"
              target="_blank"
            >
              <i class="iconfont icon-sousuo"></i>
            </a>
          </div>
          <div class="user_con signin">
            <div
              class="item"
              @mouseenter="openPanel('userShow', 'userShowTimeout')"
              @mouseleave="hiddenPanel('userShow', 'userShowTimeout')"
            >
              <div class="mini_avatar van_popover_reference" tabindex="0">
                <div :class="userShow ? 'mini_move' : ''">
                  <div class="_avatar" style="width: 40px; height: 40px">
                    <img
                      src="/static/avatar/avatar/01.webp"
                      class="_avatar_img _avatar_face _avatar_img_radius"
                      data-src=""
                    />
                    <span
                      class="_avatar_icon _avatar_right_icon _avatar_size_40"
                    ></span>
                  </div>
                </div>
              </div>
              <transition name="vp">
                <VpAvatar v-show="userShow" />
              </transition>
            </div>
            <div
              class="item"
              @mouseenter="openPanel('vipShow', 'vipShowTimeout')"
              @mouseleave="hiddenPanel('vipShow', 'vipShowTimeout')"
            >
              <div class="mini_vip van_popover_reference" tabindex="0">
                <span class="name" target="_blank">大会员</span>
              </div>
              <transition name="vp">
                <VpVip v-show="vipShow" />
              </transition>
            </div>
            <div
              class="item"
              @mouseenter="openPanel('messageShow', 'messageShowTimeout')"
              @mouseleave="hiddenPanel('messageShow', 'messageShowTimeout')"
            >
              <div class="nav_item nav_item_message">
                <div class="t">
                  <a href="//message.bilibili.com/new">
                    <span class="name">消息</span></a
                  >
                </div>
                <transition name="vp">
                  <VpMessage v-show="messageShow" />
                </transition>
              </div>
            </div>
            <div
              class="item"
              @mouseenter="openPanel('dynamicShow', 'dynamicShowTimeout')"
              @mouseleave="hiddenPanel('dynamicShow', 'dynamicShowTimeout')"
            >
              <div class="nav_item nav_item_dynamic">
                <div class="t">
                  <a href="//t.bilibili.com/" target="_blank">
                    <span class="name">动态</span></a
                  >
                </div>
                <transition name="vp">
                  <VpDynamic v-show="dynamicShow" />
                </transition>
              </div>
            </div>
            <div class="item">
              <div class="mini_favorite van_popover_reference" tabindex="0">
                <span>
                  <span class="name">收藏</span>
                </span>
              </div>
            </div>
            <div class="item">
              <div class="mini_history van_popover_reference" tabindex="0">
                <span><span class="name">历史</span></span>
              </div>
            </div>
            <div class="item">
              <a href="//member.bilibili.com/platform/home" target="_blank">
                <span class="name">创作中心</span></a
              >
            </div>
          </div>
          <div>
            <span
              ><div
                role="tooltip"
                id="van-popover-2523"
                aria-hidden="true"
                class="van_popover van_popper van_popper_upload"
                tabindex="0"
                style="display: none"
              >
                <div class="vp_container">
                  <a
                    href="//member.bilibili.com/platform/upload/text/apply"
                    target="_blank"
                    class="upload_item"
                  >
                    <i class="iconfont"></i>
                    <span class="item_title">专栏投稿</span>
                  </a>
                  <a
                    href="//member.bilibili.com/platform/upload/audio/frame"
                    target="_blank"
                    class="upload_item"
                  >
                    <i class="iconfont"></i>
                    <span class="item_title">音频投稿</span>
                  </a>
                  <a
                    href="//member.bilibili.com/platform/upload/sticker"
                    target="_blank"
                    class="upload_item"
                  >
                    <i class="iconfont"></i>
                    <span class="item_title">贴纸投稿</span>
                  </a>
                  <a
                    href="//member.bilibili.com/platform/upload/video/frame"
                    target="_blank"
                    class="upload_item"
                  >
                    <i class="iconfont"></i>
                    <span class="item_title">视频投稿</span>
                  </a>
                  <a
                    href="//member.bilibili.com/platform/upload-manager/article"
                    target="_blank"
                    class="upload_item"
                  >
                    <i class="iconfont"></i>
                    <span class="item_title">投稿管理</span>
                  </a>
                </div>
              </div>
              <span
                class="mini_upload van_popover_reference"
                aria-describedby="van-popover-2523"
                tabindex="0"
              >
                投稿
              </span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VpChannel from "./component/vp_channel.vue";
import VpGame from "./component/vp_game.vue";
import VpLive from "./component/vp_live.vue";
import VpManga from "./component/vp_manga.vue";
import SearchBox from "./component/searchBox.vue";
import VpAvatar from "./component/vp_avatar.vue";
import VpVip from "./component/vp_vip.vue";
import VpMessage from "./component/vp_message.vue";
import VpDynamic from "./component/vp_dynamic.vue";
export default {
  data() {
    return {
      channelShow: false,
      channelShowTimeout: null,

      gameShow: false,
      gameShowTimeout: null,

      liveShow: false,
      liveShowTimeout: null,

      mangaShow: false,
      mangaShowTimeout: null,

      userShow: false,
      userShowTimeout: null,

      vipShow: false,
      vipShowTimeout: null,

      messageShow: false,
      messageShowTimeout: null,

      dynamicShow: false,
      dynamicShowTimeout: null,
    };
  },
  components: {
    SearchBox,
    VpAvatar,
    VpVip,
    VpChannel,
    VpGame,
    VpLive,
    VpManga,
    VpMessage,
    VpDynamic,
  },
  methods: {
    openPanel(type, timeout) {
      if (this[timeout]) {
        clearTimeout(this[timeout]);
        this[timeout] = null;
      }
      this[timeout] = setTimeout(() => {
        this[type] = true;
        clearTimeout(this[timeout]);
        this[timeout] = null;
      }, 100);
    },
    hiddenPanel(type, timeout) {
      if (this[timeout]) {
        clearTimeout(this[timeout]);
        this[timeout] = null;
      }
      this[timeout] = setTimeout(() => {
        this[type] = false;
        clearTimeout(this[timeout]);
        this[timeout] = null;
      }, 100);
    },
  },
};
</script>

<style lang="scss">
@import "/static/css/iconfont.css";
.international_header {
  min-width: 999px;
  min-height: 56px;
  -webkit-font-smoothing: antialiased;
  font: 14px -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial,
    PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
  position: relative;
  z-index: 1000;
  .mini_type {
    position: relative;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
  }
  .nav_link {
    .nav_link_ul {
      .nav_link_item {
        .link {
          color: #212121;
          text-shadow: none;
        }
      }
    }
  }
  .nav_user_center {
    .user_con.search_icon {
      display: none;
      .iconfont {
        font-size: 20px;
      }
    }
    .iconfont {
      color: #999;
      vertical-align: middle;
      cursor: pointer;
      font-size: 28px;
    }
  }
  a {
    text-decoration: none;
    color: #212121;
    transition: color 0.3s;
  }
  * {
    box-sizing: border-box;
  }
}
/deep/ .van_popover {
  padding: 12px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  position: absolute;
  min-width: 150px;
  color: #606266;
  z-index: 2000;
  background-color: #fff;
  font-size: 14px;
  text-align: justify;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  line-height: normal;
  left: 300px;
  * {
    box-sizing: border-box;
  }
  a {
    text-decoration: none;
    color: #212121;
    transition: color 0.3s;
    &:hover {
      color: #00a1d6;
      text-decoration: none;
    }
  }
}
.mini_header {
  position: absolute;
  width: 100%;
  height: 56px;
  z-index: 1;
}
.mini_header__content {
  padding: 10px 24px;
  line-height: 30px;
  position: relative;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
.mini_avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  position: relative;
  margin-right: 10px;
  & > div {
    height: 100%;
    transform: translate(0, 0);
    transition: transform 0.2s ease;
  }
  .mini_move {
    width: 40px;
    height: 40px;
    transform: translate(2px, 60px);
  }
  ._avatar {
    display: block;
    position: relative;
    background-image: url("");
    background-size: cover;
    border-radius: 50%;
    * {
      margin: 0;
      padding: 0;
    }
    ._avatar_img {
      border: none;
      display: block;
      object-fit: cover;
      image-rendering: -webkit-optimize-contrast;
    }
    ._avatar_face {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
    }
    ._avatar_img_radius {
      border-radius: 50%;
    }
    ._avatar_size_40 {
      bottom: -1px;
      height: 14px;
      width: 14px;
    }
    ._avatar_right_icon {
      position: absolute;
      right: 0;
      background-size: cover;
      image-rendering: -webkit-optimize-contrast;
    }
  }
}
.mini_vip {
  position: relative;
}
.mini_upload {
  cursor: pointer;
  position: relative;
  color: #fff;
  font-size: 14px;
  display: block;
  height: 36px;
  width: 100px;
  line-height: 36px;
  text-align: center;
  background-color: #fb7299;
  border-radius: 2px;
  margin-left: 14px;
}
.nav_link {
  .nav_link_ul {
    height: 36px;
    display: flex;
    align-items: center;
    .nav_link_item {
      margin-right: 12px;
      position: relative;
      .link {
        font-size: 14px;
        color: #fff;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
        line-height: 32px;
        white-space: nowrap;
        display: flex;
        .navbar_logo {
          width: 70px;
          height: 32px;
          margin-right: 16px;
          background-image: url("/static/logo/logo.png");
          background-size: cover;
          background-position: center;
        }
        .navbar_pullup {
          color: #aaa;
        }
      }
    }
    .icon-icon_dingdao_xiazaiapp {
      color: #00a1d6;
      margin-right: 2px;
      font-size: 18px;
      vertical-align: middle;
    }
  }
}
.nav_user_center {
  display: flex;
  flex-shrink: 0;
  .user_con {
    display: flex;
    align-items: center;
    .item {
      position: relative;
      display: flex;
      margin-left: 12px;
      cursor: pointer;
      .name {
        color: #212121;
        text-shadow: none;
        white-space: nowrap;
      }
    }
  }
}
.nav_item {
  float: left;
  text-align: center;
  position: relative;
  background-color: rgba(255, 255, 255, 0);
  transition: all 0.3s;
  * {
    box-sizing: border-box;
  }
  .t {
    color: inherit;
    height: 100%;
    display: block;
  }
}

@media screen and (max-width: 1122px) {
  .mini_header__content {
    padding: 10px 12px;
  }
  .mini_upload {
    width: 60px;
  }
}
@media screen and(max-width:1190px) {
  .international_header {
    .nav_search_box {
      display: none;
    }
    .nav_user_center {
      .user_con.search_icon {
        display: flex;
        align-items: center;
      }
    }
  }
}
@media screen and(max-width:1280px) {
  .international_header {
    .nav_search_box {
      display: none;
    }
    .nav_user_center {
      .user_con.search_icon {
        display: flex;
        align-items: center;
      }
    }
  }
}

.vp-enter,
.vp-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
.vp-enter-to,
.vp-leave {
  opacity: 1;
  transform: translateY(0);
}
.vp-enter-active,
.vp-leave-active {
  transition: all 0.3s ease;
}
</style>